<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta charset="UTF-8">
    <title>注册</title>
    <meta name="keywords" content="注册"/>
    <meta name="description" content="注册"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1, maximum-scale=1,minimum-scale=1, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="format-detection" content="telephone=no"/>
    <meta name="viewport" content="width=device-width,viewport-fit=cover">

    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/public.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/publicOfuser.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/combtn.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/register.css}">
    <link rel="stylesheet" type="text/css" th:href="@{/shoppingApi/css/weui.min.css}">
    <script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/shoppingApi/js/jquery-weui.min.js}"></script>
    <script type="text/javascript" th:src="@{/shoppingApi/js/checkPassWord.js}"></script>
    <style type="text/css">
        input::-webkit-input-placeholder { /* WebKit browsers */
        color: #bababa;
        font-size:12px;
        } 
         input:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
        color: #bababa;
        font-size:12px;
         } 
          input::-moz-placeholder { /* Mozilla Firefox 19+ */
        color: #bababa;
        font-size:12px;
          } 
           input:-ms-input-placeholder { /* Internet Explorer 10+ */
               color: #bababa;
               font-size: 12px;
           }
    </style>
</head>
<body>
<div class="main register bgfff">
    <!--<div class="goback fixed-back"><h3 onclick="location.href='/wap/openUserCenter'">用户注册</h3></div>-->
    <div class="main_con c323232">
        <div class="header"></div>
        <div class="mr15 ml15 mt55">
            <ul class="login-form">
                <li>
                    <div class="clearfix mt15 input_border_bottom_normal">
                        <img class="ml15 fl form-icon" th:src="@{/shoppingApi/images/login_by_account.png}"
                             style="height: 22px;">
                        <!--<img th:src="@{/shoppingApi/images/hidepassword.png}" class=" mr15 mt5 fr" style="width: 20px;height: 10px">-->
                        <div class="overflow pr15 pl15">
                            <input class="ft16 c323232  w100 userNO form-input" name="userNO" value="" placeholder="用户名不能以H开头比如正确用户名(Q2019)" type="text">
                        </div>
                    </div>
                    <span class="userNO-msg"></span>
                </li>
                <li>
                    <div class="clearfix mt20 input_border_bottom_normal">
                        <img th:src="@{/shoppingApi/images/login_by_account_normal.png}" class="fl ml15 form-icon" style="height: 22px;">
                        <div class="overflow pr15 pl15">
                            <input class="ft16 c323232  w100 pwd form-input" name="pwd"  value="" placeholder="输入6-20位密码" type="password">
                        </div>
                    </div>
                    <span class="pwd-msg"></span>
                </li>
                <li>
                    <div class="clearfix mt20 input_border_bottom_normal">
                        <img th:src="@{/shoppingApi/images/login_by_account_normal.png}" class="fl ml15" style="height: 22px;width: 14px;">
                        <div class="overflow pr15 pl15">
                            <input class="ft16 c969696  w100 repwd form-input" name="repwd"  value="" placeholder="确认密码" type="password">
                        </div>
                    </div>
                    <span class="repwd-msg"></span>
                </li>
                <li>
                    <div class="clearfix mt20 input_border_bottom_normal">
                        <img th:src="@{/shoppingApi/images/register_phoone_normal.png}" class="fl ml15 form-icon" style="height: 22px;">
                        <div class="overflow pr15 pl15">
                            <input class="ft16 c323232  w100 phone form-input" name="phone"  value=""   placeholder="请输入手机号" type="text">
                        </div>
                    </div>
                    <span class="phone-msg"></span>
                </li>
                <li>
                    <div class="clearfix mt20 input_border_bottom_normal">
                        <a href="#" class="pinkbtn button pink bigrounded fr code" id="code">获取验证码</a>
                        <div class="overflow pr15 pl15" style="margin-left: 28px">
                            <input class="ft16 c323232  w100 codeval form-input form-code" name="code" value="" placeholder="请输入验证码" type="text">
                        </div>
                    </div>
                    <span class="code-msg"></span>
                </li>

                <li>
                    <div class="ml15 mt15 ft12" style="line-height: 24px;">
                        <!--<div class="fl">-->
                        <label class="agree-checkbox checked">
                            <input type="checkbox" checked style="display:none">
                            <span class="ml10 c323232">已阅读并同意</span>
                        </label>
                        <!--</div>-->
                        <a class="cf70029">《新零售微店用户协议》</a>
                    </div>
                </li>

                <li>
                    <div><a  class="ftc submit mt10 bigrounded button red registersubmit">提交注册</a></div>
                </li>

                <!--<li>-->
                    <!--<div class="flex flex-pj mt30 ft13 ml15 mr15" style="line-height: 15px;">-->
                        <!--<a th:href="@{/wap/openLoginByPhone}" class="c646464"><span>手机号登录</span></a>-->
                        <!--<a th:href="@{/wap/openLoginPwd}" class="c646464"><span>密码登录</span></a>-->
                    <!--</div>-->
                <!--</li>-->
            </ul>
        </div>
    </div>
</div>
</body>

<script>
    /*请求头定义*/
    var header = $("meta[name='_csrf_header']").attr("content");
    var token =$("meta[name='_csrf']").attr("content");


    /*开始注册*/
$(function () {
    $('.userNO-msg').html("用户名为4-20位的字母或数字组成");
    $('.userNO').on('input propertychange', function () {
        var val = $(this).val();
        val.indexOf(' ') > -1 && $(this).val($.trim(val));
    });
})

    verifyUserNo();
    //验证输入密码
    getPwd();
    //确认密码
    getRepwd();

    //验证手机号
    getPhone();


   /*验证用户号*/
   var userNO='';
   function  verifyUserNo() {
       //获取焦点
       // $('.userNO').on('focus',function () {
       //     $('.userNO-msg').html("用户编号必须以字母Q开头，不区分大小写！");
       // })

       //失去焦点
       $('.userNO').on('blur',function () {
           // userNO=$('.userNO').val();
            //检测用户编号
           getUserNo();
       })
   }

/*用户编号*/
var userflag = false;
function getUserNo() {
    userNO=$('.userNO').val();
    userNo = userNO.replace(' ','');//去掉空格
    $('.userNO').val(userNo);
    //以Q开头
    var str= userNo.substring(0,1).toLowerCase();
    if (str=='h') {
        $('.userNO-msg').html("用户号不能以H开头，不区分大小写").css({'color':'red'});
        userflag = false;
        return;
    }

    // 用户号不能有-_中文
    var reg = /^[a-zA-Z0-9]{4,20}$/i.test(userNo);
    if(reg){
        //检测用户编号是否被注册过
        $.ajax({
            url:"/wap/selectUserNoByUserNo?userNo="+userNo,
            success:function (result) {
                //已经注册
                console.log();
                if(result.userNo){
                    $('.userNO-msg').html("用户名已经存在，请重新输入").css({'color':'red'});
                    userflag = false;
                }else{
                    //未注册
                    $('.userNO-msg').html("用户名可以使用").css({'color':'green'});
                    userflag = true;
                }
            }
        })
    }else{
        $('.userNO-msg').html("用户名为4-20位的字母或数字组成").css({'color':'red'});
        userflag = false;
    }
}
/*输入密码*/
var pwd='';
var pwdflag = false;
function  getPwd() {
    //获取焦点
    // $('.pwd').on('focus',function () {
    //     $('.pwd-msg').html("请输入6位至20位密码！");
    // })
    //失去焦点
    $('.pwd').on('blur',function () {
        pwd= $('.pwd').val();
        if(pwd.length>=6&&pwd.length<=20){
            $('.pwd-msg');
            $('.pwd-msg').html("密码可以使用").css({'color':'green'});
            pwdflag = true;
        }else{
            $('.pwd-msg').html("密码必须是6至20位！").css({'color':'red'});
            pwdflag = false;
        }
        var booles=checkpwd(pwd,0);
        if(booles==false){
            $('.pwd-msg').html("密码应该是数字、大小写字母,请重新输入！").css({'color':'red'});
            pwdflag = false;
        }
    })
}

/*确认密码*/
var repwdflag = false;
function  getRepwd() {
     //获取焦点
    // $('.repwd').on('focus',function () {
        // $('.repwd-msg').html("注：请输入和上面一致的密码！");
    // })

    //失去焦点
    $('.repwd').on('blur',function (){
        var repwd= $('.repwd').val();
        var pwd= $('.pwd').val();
        if(repwd && repwd==pwd){
            $('.repwd-msg').html("输入的密码正确").css({'color':'green'});
            repwdflag = true;
        }else {
            $('.repwd-msg').html("请确保两次输入的密码一致").css({'color':'red'});
            repwdflag = false;
        }
    });
}

/*验证手机号*/
var phone="";
var phoneflag=false;
var userNoCount=0;
function getPhone() {
    //获取焦点
    // $('.phone').on('focus',function () {
    //    $('.phone-msg').html("请输入手机号");
    // })
    //失去焦点
    $('.phone').on('blur',function () {
         phone = $('.phone').val();
        var pattern = /^1[3456789]\d{9}$/;
        if(pattern.test(phone)){
            //验证手机号注册的账号个数
            // userNoCount=verUserNoCountByPhone(phone);
            // alert("count:"+userNoCount);
            $.ajax({
                async:false,
                url:'/wap/verUserNoCountByPhone?phone='+phone+"&type=1",
                success:function (result) {
                    console.log(result.userNoCount);
                    userNoCount=result.userNoCount;

                    if(userNoCount>=1){
                        $('.phone-msg').html("一个手机号只能注册一个账号账号").css({'color':'red'});
                        phoneflag=false;
                    }else{
                        $('.phone-msg').html("手机号可用").css({'color':'green'});
                        phoneflag=true;
                    }
                }
            })
        }else{
            $('.phone-msg').html("请输入正确的手机号").css({'color':'red'});
            phoneflag=false;
        }
    })
}

/*验证手机已经注册的账号个数*/
function  verUserNoCountByPhone(phone) {
    $.ajax({
        async:false,
        url:'/wap/verUserNoCountByPhone?phone='+phone,
        success:function (result) {
            console.log(result.userNoCount);
            userNoCount=result.userNoCount;
        }
    })
    return userNoCount;
}

/*发送短信验证码*/
    var code='';
    function getCode() {
        $(document).on('click', '.code', function () {
             // phoneflag=getPhone();
            var phone = $('.phone').val();
            var pattern = /^1[3456789]\d{9}$/;
            if(pattern.test(phone)){
                $.ajax({
                    async:false,
                    url:'/wap/verUserNoCountByPhone?phone='+phone,
                    success:function (result) {
                        console.log(result.userNoCount);
                        userNoCount=result.userNoCount;
                        if(userNoCount>=1){
                            $('.phone-msg').html("一个手机号只能注册一个账号账号").css({'color':'red'});
                        }else{
                            $('.phone-msg').html("手机号可用").css({'color':'green'});
                            $.ajax({
                                async:false,
                                dataType: 'json',
                                contentType: 'application/json',
                                url:'/wap/sendCodeByPhone?phone='+phone+"&type=1",
                                success:function (result) {
                                    var  data=$.parseJSON(result.json);
                                     if(data.stat==100){
                                         getCodeTimer();
                                     }else {
                                         $('.code-msg').html("发送错误!");
                                     }
                                }
                            });
                            // code="1002";
                            // $('.codeval').val(code);
                        }
                    }
                });
            }else {
                $('.phone-msg').html("请输入正确的手机号").css({'color':'red'});
            }

            // if(flag){
            //     $.ajax({
            //         url: '/API/user/JsonUserNoPhone?phone=' + phone,
            //         success: function (result) {
            //             var  data=$.parseJSON(result.json);
            //             console.log(result);
            //             console.log('stat='+data.stat);
            //             if(data.stat=='100'){
            //                 getCodeTimer();
            //                 code=result.Regcode;
            //                 console.log("code="+code);
            //                 $('.code-msg').html("验证码发送成功").css({'color':'green'});
            //             }
            //         },
            //         beforeSend: function (xhr) {
            //             xhr.setRequestHeader(header, token);
            //         }
            //     })
            // }else{
            //     $('.phone-msg').html("请输入正确的手机号").css({'color':'red'});
            // }
        })
    }

   getCode();
/*解绑点击事件*/
// function  clearClick() {
//     $('.code').off('click');
// }

/*调用点击获取验证码*/

/*提交注册*/
$('.registersubmit').on('click',function () {
    if (!userflag) {
        $('[name="userNO"]').focus();
        return;
    }
    if (!pwdflag) {
        $('[name="pwd"]').focus();
        return;
    }
    if (!repwdflag) {
        $('[name="repwd"]').focus();
        return;
    }
    if (!phoneflag) {
        $('[name="phone"]').focus();
        return;
    }
    var Regscode=$('.codeval').val();
    if(Regscode!=''&&Regscode!=null){
            $.ajax({
                type: 'post',
                url: '/wap/userRegister',
                data: {
                    userNo:userNO,
                    pwd:pwd,
                    phone:phone,
                    code: Regscode
                },
                success: function (result) {
                    if(result.msg=="1"){
                        $('.registersubmit').off('click');
                        //$.toast("注册成功");
                        $.toast("注册成功",900, function() {
                            // window.location.href='/wap/openUserCenter';
                            window.location.href='/wap/activity?productId=490';
                        });
                    }else if(result.msg=="0","cancal"){
                        $.toast("注册失败!");
                    }else if(result.msg=="-1"){
                        $.toast("注册失败!!","cancal");
                    }
                }


            })
        // }else {
        //     $('.code-msg').html("验证码错误");
        // }
    }else {
        $('.code-msg').html("请输入验证码");
    }
})

    function getCodeTimer () {
        var leftTime = 59;
        $('#code').removeClass('code');
        // clearClick();
        // if (leftTime && leftTime > 0) {
            var codeTimer = setInterval(function () {
                leftTime--;
                // sessionStorage.setItem('timing', leftTime);
                // $('#code').text(leftTime+'秒后重新获取').addClass('codeDisabled');
                $('#code').text(leftTime+'秒后重新获取');
                if (leftTime == 0) {
                    clearInterval(codeTimer);
                    // $('#code').text('重新获取').removeClass('codeDisabled');
                    $('#code').text('重新获取');
                    $('#code').addClass('code');
                }
            }, 1000);
        // }
    }
    $('.agree-checkbox').on('click', function (e) {
        if (!$(this).hasClass('checked')) {
            $(this).addClass('checked');
        } else {
            $(this).removeClass('checked');
        }
        e.preventDefault();
    });
</script>

</html>